<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ImGui + Pyodide Demo</title>
    <!-- CodeMirror CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
    <!-- Optional: CodeMirror Theme -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/eclipse.min.css">
    <!-- Tippy.js CSS -->
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
    <!-- Custom styles -->
    <link rel="stylesheet" href="styles.css">
    <style>
        .emscripten {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- Header Panel -->
    <div id="header">
        <div id="header-left">
            <!-- Dear ImGui Logo with Tippy.js Tooltip -->
            <a href="https://github.com/ocornut/imgui" target="_blank" aria-label="Visit Dear ImGui GitHub Repository">
                <img src="images/logo_imgui.png" alt="Dear ImGui Logo" class="logo" data-tippy-content="
                    <div style='text-align: center;'>
                        <img src='images/logo_imgui.png' alt='Dear ImGui Logo' style='width:200px; margin-bottom:10px;'><br>
                        <strong>Dear ImGui:</strong><br>
                        Bloat-free Immediate Mode Graphical User Interface for C++ with minimal dependencies.
                    </div>
                ">
            </a>
            <!-- Dear ImGui Bundle Logo with Tippy.js Tooltip -->
            <a href="https://github.com/pthom/imgui_bundle" target="_blank" aria-label="Visit Dear ImGui Bundle GitHub Repository">
                <img src="images/logo_imgui_bundle.png" alt="Dear ImGui Bundle Logo" class="logo" data-tippy-content="
                    <div style='text-align: center;'>
                        <img src='images/logo_imgui_bundle.png' alt='Dear ImGui Bundle Logo' style='width:200px; margin-bottom:10px;'><br>
                        <strong>Dear ImGui Bundle:</strong><br>
                        Ready-to-use widgets and libraries based on ImGui. Start your first app in 5 lines of code. Supports Python and C++.
                    </div>
                ">
            </a>
            <!-- Motto -->
            <div id="motto">Real interactivity starts at 60FPS...</div>
        </div>
        <div id="header-right">
            <!-- Dropdown for Example Files -->
            <label for="example-selector" id="example-label">Select Example:</label>
            <select id="example-selector">
                <option value="">-- Select an Example --</option>
                <!-- Options will be populated dynamically -->
            </select>
            <!-- Run Button -->
            <button id="run-button">Run</button>
        </div>
    </div>

    <!-- Main Container -->
    <div id="main-container">
        <div id="editor-and-canvas-container">
            <div id="editor-container">
                <div id="editor"></div>
                <!-- Error Output Window -->
                <div id="error-output" class="hidden">
                    <button id="close-error" aria-label="Close Error Output">&times;</button>
                    <pre></pre>
                </div>
            </div>
            <div id="canvas-container">
                <canvas class="emscripten" id="canvas" tabindex="0" oncontextmenu="event.preventDefault()"></canvas>
            </div>
        </div>
    </div>

    <!-- Loading Progress Modal -->
    <div id="loading-modal" class="modal hidden">
        <div class="modal-content">
            <h2>Loading...</h2>
            <div id="progress-container">
                <div id="progress-bar"></div>
            </div>
            <p id="progress-text">Initializing...</p>
        </div>
    </div>

    <!-- Include JS libraries here -->
    <!-- Split.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
    <!-- CodeMirror JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>
    <!-- Pyodide -->
    <script src="pyodide_dist/pyodide.js"></script>
    <!-- Tippy.js, JS and CSS -->
    <script src="libs/popper.min.js"></script>
    <script src="libs/tippy-bundle.umd.min.js"></script>
    <link rel="stylesheet" href="libs/tippy.css">    <!-- Custom JS Modules -->

    <!-- Our code -->
    <script src="js/ui.js"></script>
    <script src="js/pyodide_loader.js"></script>
    <script src="js/examples.js"></script>
    <script src="js/emscripten_canvas.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
